<!--
 * @Description: 因子库列表
 * @Author: qingyang
 * @Date: 2022-01-10 16:04:17
 * @LastEditors: chenju
 * @LastEditTime: 2022-03-18 11:00:36
-->
<template>
  <div class="relationship-page">
    <div class="relationship-title">
      <span class="header-title">关联关系列表</span>
      <div>
        <el-button @click="handleEmission" v-btnPermission="'ECI_EMISSION_SOURCE_CHECK'">
          排放源配置
        </el-button>
        <el-button @click="handleFuel" v-btnPermission="'ECI_EMISSION_MATERIAL_VIEW'">
          能源/燃料配置
        </el-button>
        <el-button type="primary" @click="addHandle" v-btnPermission="'ECI_RELATIONSHIP_ADD'">
          <CIcon type="c-xian-xinjian" class="g-mr4"></CIcon>新增
        </el-button>
      </div>
    </div>
    <div class="divider"></div>
    <div class="relationship-content">
      <div
        class="relationship-tree-wrap"
        :class="!collapseState ? 'relationship-tree-wrap-shrink' : ''"
      >
        <RelationshipTree @selectData="selectData" />
        <CCircleButton
          class="collapse-button"
          :type="collapseState ? 'c-xian-zuo' : 'c-xian-you'"
          @click="handleCollapse"
        ></CCircleButton>
      </div>
      <div class="relationship-list-wrap">
        <RelationshipList
          ref="RelationshipListRef"
          :frameworkNo="frameworkNo"
          :frameworkName="frameworkName"
          :isParentNode="isParentNode"
          :treeData="treeData"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'RelationshipManagement'
};
</script>
<script lang="ts" setup>
import { ref } from 'vue';
import RelationshipList from './components/RelationshipList.vue';
import RelationshipTree from './components/RelationshipTree.vue';
import { GetEmissionListResult } from '@/apis/system/config/model/relationshipModel';
import CCircleButton from '@/components/CCircleButton/index.vue';
import { useRouter } from 'vue-router';

const frameworkNo = ref('');
const frameworkName = ref('');
const isParentNode = ref(false);
const treeData = ref();
const router = useRouter();
const RelationshipListRef = ref();
const selectData = (data: GetEmissionListResult) => {
  frameworkNo.value = data.frameworkNo;
  frameworkName.value = data.frameworkName;
  isParentNode.value = !data.status;
  treeData.value = data;
};
const addHandle = () => {
  RelationshipListRef.value.addHandle();
};
const collapseState = ref<boolean>(true);
function handleCollapse() {
  // 点击收起动画
  collapseState.value = !collapseState.value;
}
const handleEmission = () => {
  router.push('/system/configManagement/emission');
};
const handleFuel = () => {
  router.push('/system/configManagement/fuelsEnergyMaterials');
};
</script>

<style lang="scss" scoped>
.relationship-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  .relationship-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background-color: #fff;
    height: 55px;
    .header-title {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #0a1f33;
      line-height: 24px;
    }
  }
  .divider {
    width: 100%;
    height: 1px;
    background: #f0f4f7;
  }
  .relationship-content {
    display: flex;
    height: calc(100vh - 50px - 56px);
    overflow: hidden;

    .relationship-tree-wrap {
      transition: width 0.3s;
      position: relative;
      width: 240px;
      height: 100%;
      .collapse-button {
        position: absolute;
        z-index: 999;
        top: 257px;
        left: 224px;
        transition: all 0.3s;
      }
    }

    .relationship-tree-wrap-shrink {
      width: 0 !important;
      transition: width 0.3s;
      .collapse-button {
        left: 0;
        z-index: 9999;
        transition: all 0.3s;
        // top: calc(50% - (50px - 40px - 80px) / 2);
        // right: 304px;
        // transition: right 0.3s;
      }
    }
    .relationship-list-wrap {
      transition: width 0.3s;
      flex: 1;
      border-left: 1px solid #ebeef5;
      height: 100%;
      overflow: auto;
      background: #f3f7fb;
    }
  }
}
</style>
